<template>
  <div class="header">
    <wrapper>
      <slot v-if="$slots.default"></slot>
      <el-row v-else>
        <el-col class="header-logo" :span="8">
          <div class="header-logo-inner">
            <router-link to="/settings">
              <img :src="logo">
            </router-link>
            <h2 v-if="title">{{title}}</h2>
          </div>
        </el-col>
        <el-col class="header-sub" :span="16" v-if="$route.path.indexOf('/login')===-1">
          <a href="http://www.oooseed.com/" target="_blank">
            <i class="iconfont">&#xe68c;</i> 求苗官网
          </a>
          <span class="space"></span>
          <span class="space"></span>
          <span class="space"></span>
          <el-dropdown @command="userEdit" v-if="person_info.userId">
            <div class="el-dropdown-link">
              <avatar class="user-photo" :src="this.person_info.iconUrl" />
            </div>
            <el-dropdown-menu slot="dropdown" class="user-dropdown-menu">
              <el-dropdown-item command="userinfo"><i class="iconfont">&#xe619;</i><a :href="this.$route.path.includes('/organize')?'javascript:void(0);':'#/settings'">个人中心</a></el-dropdown-item>
              <el-dropdown-item command="userexit"><i class="iconfont">&#xe612;</i>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </wrapper>
  </div>
</template>

<script>
  import indexApi from 'api'
  import { VuecookieDelete } from 'utils/cookie'
  import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters([
        'person_info'
      ])
    },
    created () {
      localStorage.getItem('htxk_token') && this.$store.dispatch('person_info')
    },
    data () {
      return {}
    },
    props: {
      logo: {
        type: String,
        default: 'static/images/logo.png'
      },
      title: {
        type: String
      }
    },
    methods: {
      userEdit (command) {
        if (command === 'userexit') {
          this.$confirm('确定退出登录, 是否继续?', '温馨提示', {
            type: 'warning'
          }).then(() => {
            indexApi.userExit({}, {successMsg: '登出成功'}).then((res) => {
              VuecookieDelete('auto_login')
              this.$store.dispatch('reset_info')
              localStorage.removeItem('menuKey')
              localStorage.removeItem('auth_orgId')
              location.href = `/?${Math.random().toString(36).substr(2)}#/login`
            })
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .header{
    height:60px;
    background:#fff;
    box-shadow: 0px 0px 6px rgba(0,0,0,0.15);
    &-logo{
      display:table;
      height:60px;
      &-inner{
        display:table-cell;
        vertical-align: middle;
      }
      img{
        vertical-align: middle;
      }
    }
    &-sub{
      text-align:right;
      height:60px;
      line-height:60px;
      img{
        vertical-align: middle;
      }
      .user-photo{
        width:30px;
        height: 30px;
        border-radius:50%;
      }
      .el-dropdown-link{
        margin-bottom:-6px;
        margin-left:15px;
      }
    }
    h2{
      font-size:24px;
      margin-left: 20px;
      display:inline-block;
      line-height:60px;
      vertical-align: middle;
    }
  }
  .user-dropdown-menu{
    width:120px;
    .iconfont{
      margin-right:5px;
    }
  }
</style>
